import React from 'react';
import { connect } from 'dva';
import PropTypes from 'prop-types';
import { Table , Modal, Menu, Icon, Button, message } from 'antd';
import Query from './Query';
import Toggles from '../../components/Toggles';
import styles from './index.less';
import classnames from 'classnames';
import { Link } from 'dva/router';
import DropOption  from '../../components/DropOption/DropOption';
import QueueAnim from 'rc-queue-anim';
import AddModal from './AddModal';
const confirm = Modal.confirm

function List ({
  price: {
    list,
    load,
    record,
    selectedRows,
    selectedRowKeys,
    customerList,
    index,
  },
  price,
  onSearch,
  onDeleteItem,
  onEditItem,
  onDeleteItem1,
  location,
  onCreate,
  dispatch
  }) {


    const handleMenuClick = (record, e) => {
      if (e.key === '1') {
         dispatch({
           type:'price/save',
           payload:{record}
         })
          document.getElementById('modify').click();
      } else if (e.key === '2') {
        confirm({
          title: '您确定要删除这条记录吗?',
          onOk () {
            onDeleteItem(record.id)
          },
        })
      }
    }

    const deleteHandler = () => {
      if(!selectedRowKeys || selectedRowKeys.length<1){
        message.warning('请选择要删除数据！',2)
        return;
      }
      confirm({
        title: '您确定要删除所有选中数据吗?',
        onOk () {
          dispatch({
            type: 'price/delete',
            payload: selectedRowKeys
          })
        },
      })
    }

  const rowSelection = {
    onChange: (selectedRowKeys, selectedRows) => {
      dispatch({
        type:'price/save',
        payload:{selectedRows, selectedRowKeys}
      })
    },
    type: 'checkbox',
    selectedRowKeys:selectedRowKeys
  }

  //毫秒数日期操作
  function getMyDate(str){
    function getzf(num){
        if(parseInt(num) < 10){
            num = '0'+num;
        }
        return num;
      }
      var oDate = new Date(str),
      oYear = oDate.getFullYear(),
      oMonth = oDate.getMonth()+1,
      oDay = oDate.getDate(),
      oHour = oDate.getHours(),
      oMin = oDate.getMinutes(),
      oSen = oDate.getSeconds(),
      oTime = oYear +'-'+ getzf(oMonth) +'-'+ getzf(oDay) +' '+ getzf(oHour) +':'+ getzf(oMin) +':'+getzf(oSen);//最后拼接时间
      return oTime;
  };
  const columns = [
    {
      title: '服务项目系统号',
      dataIndex: 'id',
      key: 'id',

    }, {
      title: '产品',
      dataIndex: 'product',
      key: 'product',
    }, {
      title: '客户',
      dataIndex: 'customerName',
      key: 'customerName',
    }, {
      title: '客户编号',
      dataIndex: 'customerNum',
      key: 'customerNum',
    }, {
      title: '价格',
      dataIndex: 'price',
      key: 'price',
      // width: 130,
    }, {
      title: '成本',
      dataIndex: 'cost',
      key: 'cost',

    }, {
      title: '服务描述',
      dataIndex: 'serviceDescription',
      key: 'serviceDescription',

    }, {
      title: '生效时间',
      dataIndex: 'effectiveTime',
      key: 'effectiveTime',
      render:(text)=>text?<span>{getMyDate(text)}</span>:''
    }, {
      title: '失效时间',
      dataIndex: 'deadTime',
      key: 'deadTime',
      render:(text)=>text?<span>{getMyDate(text)}</span>:''
    }, {
      title: '状态',
      dataIndex: 'status',
      key: 'status',

      render: (text) => <span>{text==1
            ? '是'
            : '否'}</span>,
    },{
      title: '阶梯报价',
      dataIndex: 'ladderQuotation',
      key: 'ladderQuotation',
      render: (text) => <span>{text==1
      ? '总 价'
      : '人 均'}</span>,
    },{
      title: '创建人',
      dataIndex: 'operator',
      key: 'operator',
    },{
      title: '创建时间',
      dataIndex: 'createTime',
      key: 'createTime',
      render:(text)=>text?<span>{getMyDate(text)}</span>:''
    },
    {
      title: '变更人',
      dataIndex: 'operator',
      key: 'changer',
    },
    {
      title: '变更时间',
      dataIndex: 'modifyTime',
      key: 'modifyTime',
      render:(text)=> text ? <span>{getMyDate(text)}</span> : ''
    },
     {
      title: '操作',
      key: 'operation',
      width: 30,
      fixed: 'right',
      render: (text, record) => {
        return <DropOption onMenuClick={e => handleMenuClick(record, e)} menuOptions={[{ key: '1', name: '修改' }, { key: '2', name: '删除' },{ key: '3', name: '导出' }]} />
      },
    },
  ]

  return (
    <div >
      <Toggles name='查询条件'>
        <Query onOk={onSearch}/>
      </Toggles>
      <div style={{padding: '10px 2px'}}>
        <AddModal onOk={onCreate} show={true} selectedRows={[]} customerList={customerList}>
          <Button type='primary' style={{marginLeft:'5px'}} icon="plus-circle-o">新增派接单</Button>
        </AddModal>
        <AddModal onOk={onEditItem} selectedRows={selectedRows} customerList={customerList}>
          <Button type='primary' id='modify' style={{marginLeft:'5px'}} icon="edit">修改派接单修改</Button>
        </AddModal>

        <AddModal onOk={{}} selectedRows={selectedRows} customerList={customerList}>
          <Button type='primary' style={{marginLeft:'5px'}} icon="eye-o">查看</Button>
        </AddModal>
        <Button type='primary' onClick={deleteHandler} style={{marginLeft:'5px'}} icon="delete">批量删除</Button>

        <Button style={{marginLeft:'5px'}} icon="upload">导出</Button>
      </div>
      <div style={{'background': 'white'}}>
        <QueueAnim//进场动画，每个子标签必须带 key，如果未设置 key 将不执行动画。
          type={'right'}
          delay={30}
          duration={1000}
          ease={'easeInQuart'}
        >
          <Table
            key='1'
            pagination={{
              showSizeChanger: true,
              showQuickJumper: true,
              showTotal: total => `共 ${total} 条`,
              pageSizeOptions:['5','10','15','20'],
              defaultPageSize:5,
            }}
            loading={load}
            dataSource={list}
            className = {styles.table}
            // onRowClick={onRowClick}
            rowSelection={rowSelection}
            // simple
            // rowClassName={rowClassName}
            size={'small'}
            style={{width:'100%'}}
            rowKey={record => record.id}
            columns={columns}
            // bordered={false}
            scroll={{ x: '120%'}}
          />
        </QueueAnim>
      </div>

    </div>
  );
}

List.propTypes = {
  price: PropTypes.object.isRequired,
  onDeleteItem: PropTypes.func.isRequired,
  onEditItem: PropTypes.func.isRequired
};

export default List;
